<template>
	<view >
		<view class="tab-bar">
			<u-tabs :list="list" :is-scroll="false" :current="current" active-color="#c6100e" height="80" bg-color="#f8f8f8" @change="change"></u-tabs>
		</view>
		
		<view class="readmore">
			<view>
				<text>{{describe}}</text>
			</view>
			<view @click="readMore" style="display: flex;justify-content: space-around;">
				<text>点击展开</text>
				<view>
					<u-icon :name="icon"></u-icon>
				</view>
			</view>
		</view>
			<view class="step" v-if="isShow">
				<view class="btn">
					<text type="error" :plain="true">竞拍截止</text>
				</view>
				<view class="img">
					<image src="../../../../static/bottom.png" mode=""></image>
				</view>
				<view class="btn">
					<text type="error" :plain="true">一天内缴清竞拍价</text>
				</view>
				<view class="img">
					<image src="../../../../static/bottom.png" mode=""></image>
				</view>
				<view class="btn">
					<text type="error" :plain="true">三天内快递发货</text>
				</view>
				<view class="img">
					<image src="../../../../static/bottom.png" mode=""></image>
				</view>
				<view v-if="current == 0" class="btn">
					<text type="error" :plain="true">获得快递单号,等待收货</text>
				</view>
				<view v-if="current == 1" class="btn">
					<text type="error" :plain="true">提供快递单号，等待收货</text>
				</view>
				<view class="img">
					<image src="../../../../static/bottom.png" mode=""></image>
				</view>
				<view v-if="current == 0" class="btn">
					<text>收货三天内交易完成</text>
				</view>
				<view v-if="current == 1" class="btn">
					<text>收货三天内交易完成,结算</text>
				</view>
				<view class="img" v-if="current == 1">
					<image src="../../../../static/bottom.png" mode=""></image>
				</view>
				<view v-if="current == 1" class="btn">
					<text>15个工作日清算,付清款项</text>
				</view>
				<view class="icon" @click="closeMore">
						<text>收起</text>
					 <u-icon name="arrow-up"></u-icon>
				</view>
			</view>
			
			<!-- 拍品信息模块 -->
			<view class="list" v-if="current == 0">
				<view class="detail">
					<image src="../../../../static/person.png" class="bg" mode=""></image>
					<image src="../../../../static/已获得logo.png" class="logo" mode=""></image>
					<view class="state">
						<text>已结拍</text>
					</view>
					<view class="name">
						<text>柳子峻《王者之风》</text>
					</view>
					<view class="price">
						<text>最高出价：1,200,000</text>
					</view>
				</view>
				<view class="detail">
					<image src="../../../../static/person.png" class="bg" mode=""></image>
					<image src="../../../../static/已获得logo.png" class="logo" mode=""></image>
					<view class="state">
						<text>已结拍</text>
					</view>
					<view class="name">
						<text>吴冠中《巴黎教堂》</text>
					</view>
					<view class="price">
						<text>最高出价：1,200,000</text>
					</view>
				</view>
			</view>
			<!-- 卖品信息模块 -->
			
			<view class="list" v-if="current == 1">
				<view class="detail">
					<image src="../../../../static/007.jpg" class="bg" mode=""></image>
					<image src="../../../../static/已获得logo.png" class="logo" mode=""></image>
					<view class="state">
						<text>已结拍</text>
					</view>
					<view class="name">
						<text>柳子峻《王者之风》</text>
					</view>
					<view class="price">
						<text>最高出价：1,200,000</text>
					</view>
				</view>
				<view class="detail">
					<image src="../../../../static/007.jpg" class="bg" mode=""></image>
					<image src="../../../../static/已获得logo.png" class="logo" mode=""></image>
					<view class="state">
						<text>已结拍</text>
					</view>
					<view class="name">
						<text>吴冠中《巴黎教堂》</text>
					</view>
					<view class="price">
						<text>最高出价：1,200,000</text>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				describe:"如何通过拍卖获得拍品",
				isShow: false,
				icon: "arrow-right",
				list: [
					{
					name: '拍品'
				  }, 
					{
					name: '卖品',
				  }
				],
				current: 0
			}
		},
		methods:{
			change(index) {
			  this.current = index
				if(this.current == 1){
					this.describe = "如何通过拍卖获得卖品"
				}else{
					this.describe = "如何通过拍卖获得拍品"
				}
			 },
			 readMore(){
				 this.isShow = true
				 this.icon = "arrow-down"
			 },
			 closeMore(){
				 this.isShow = false
				 this.icon = "arrow-right"
			 }
		}
	}
</script>

<style lang="scss" scoped>
	.step {
		width: 90%;
		margin: 5%;
	}
	
	.img image {
		width: 10rpx;
		height: 40rpx;
		margin-left: 50%;
		margin-top: 15rpx;
	}
	
	.btn {
		width: 60%;
		margin-left: 20%;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fefffe;
		border: 1rpx solid #C6100E;
		text-align: center;
		border-radius: 40rpx ;
	}
	
	.icon {
		margin-left: 45%;
		margin-top: 25rpx;
	}
	
	.readmore {
		display: flex;
		justify-content: space-between;
		margin: 5%;
	}
	
	.list {
		width: 97%;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	
	.detail {
		width: 380rpx;
		margin-left: 3%;
		background-color: #fefffe;
		position: relative;
		border-radius: 0 0 10rpx 10rpx;
	}
	
	.detail .bg {
		width: 100%;
		height: 370rpx;
		border-radius: 10rpx 10rpx 0 0;
	}
	
	.detail .logo {
		width: 50%;
		height: 180rpx;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	.state {
		color: #FFFFFF;
		background-color: #666666;
		width: 120rpx;
		height: 40rpx;
		position: absolute;
		bottom: 160rpx;
		line-height: 40rpx;
		text-align: center;
		right: 2rpx;
		border-radius: 20rpx 0 0 20rpx;
	}
	
	.name {
		font-weight: 700;
		margin-left: 20rpx;
	}
	
	.price {
		color: #da242a;
		margin-left: 20rpx;
	}
</style>
